<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		*{
			margin: 0;
			padding: 0;
		}

		.heads{
			width: 100%;
			height: 50px;
			position: relative;
			background-color: #000;
		}

		ul{
			margin-left: 70px;
		}

		ul li{
			float: left;
			margin: 10px 20px;
			list-style: none;
			color: #fff;  
			cursor: pointer;
		}

		.on{
			color: red;
		}

		li:hover{
			color: red;
		}

		.active{
			content: '';
			display: block;
			width: 107px;
			height: 5px;
			background-color: red;
			position: absolute;
			bottom: 0;
			left: 70px;
		}


	</style>

</head>
<body>

	<div class="heads">

		<ul>
			<li class="on">html课程</li>
			<li>css课程</li>
			<li>javascript课程</li>
			<li>jquery课程</li>
			<li>vue课程</li>
		</ul>
		<div class="active"></div>

	</div>

	<script src="../lib/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		!function(window,document,$,undefined) {

			$('ul li').on('mouseover',function() {
				var $this = $(this),
					w = $this.outerWidth(true), //获取包括内边界和边框的元素宽度值为true的时候才计算外边距;
					p = $this.position();//返回的是一个对象，里面有两个{top:0 , left:0};


				$this.addClass('on').siblings('.on').removeClass('on')
				$('.active').width(w).animate({left: p.left},100)
			})
			
		}(window,document,jQuery)
	</script>
	
</body>
</html>